<script setup lang="ts">

/* ref shallowRef triggerRef MyRef reactive shallowReactive */
// import A1 from "./components/A1.vue";
/* toRef toRaw @click */
// import A2 from "./components/A2.vue";
/* 计算属性 */
// import A3 from "./components/A3.vue";
/* watch */
// import A4 from "./components/A4.vue";
/* watchEffect */
// import A5 from "./components/A5.vue";
/* 生命周期 */
// import A6 from "./components/A6.vue";
/* rem */
// import A7 from "./components/A7.vue";
/* layout布局 */
// import Layout from "./Layout/index.vue"
/* defineProps defineEmits 父子组件传值 */
// import waterFallVue from "./components/water-fall.vue"
/* 局部组件 全局组件 */
// import CardVue from "./components/Card.vue"
/* 递归组件 */
// import Recursive from "./components/Recursive.vue";
/* 动态组件 */
// import Trends from "./components/Trends.vue";
/* 插槽slog */
// import Dialog from "./components/Dialog.vue";
/* 异步组件 */
// import Sync from "./components/Sync.vue";
/*  */
// import Teleport0 from "./components/Teleport0.vue";
/* 过渡效果 动画生命周期 */
// import Transition0 from './components/Transition0.vue';
/* 过渡效果使用lodash */
// import Transition1 from './components/Transition1.vue';
/* 过渡效果使用gsap */
// import Transition2 from './components/Transition2.vue';
/* 依赖注入  父子组件传参 */
// import Provide1 from './components/Provide1.vue';
/* 兄弟组件传参  父组件 */
// import Bus1 from './components/Bus1.vue';
/* 使用defineProps defineEmits 实现v-model父子组件通信  */
// import VModell from './components/VModell.vue';
/* 自定义指令 简写指令 */
// import CustomDirective from './components/CustomDirective.vue';
/* 自定义指令 div拖拽效果 */
// import CustomDirective1 from './components/CustomDirective1.vue';
/* 自定义指令 图片懒加载 */
// import CustomDirective2 from './components/CustomDirective2.vue';
/* 自定义hooks */
// import Hooks from './components/Hooks.vue';
/* 全局函数 */
// import GlobalFunctions from './components/GlobalFunctions.vue';
//* 自定义vue3插件 */
// import CustomPlugin from './components/CustomPlugin.vue';
/* Element-PLUS */
// import EL1 from './components/EL1.vue'
/* CSS新特性 */
// import CssNewFeatures from './components/CssNewFeatures.vue';
/* Tailwind CSS */
// import Tailwind from './components/Tailwind1.vue'
/* nextTick异步任务 */
// import NextTick from './components/Loading/NextTick.vue';
/* 移动端web开发 (解注释vite.config.ts的postcss: {plugins: [PostCsspxToViewport()]})*/
// import MobileWeb from './components/MobileWeb.vue';
/* unoCss */
// import UnoCss1 from './components/UnoCss1.vue';
// /* 函数组件 */
// import FunctionComponents from './components/FunctionComponents.vue';
/* Vue3.3新特性 */
// import Vue33 from './components/Vue3.3.vue';
/* 环境变量 */
// import EnvironmentVariable from './components/EnvironmentVariable.vue';
/* vue3 web components */
// import CustomVue from './components/custom-vue.vue'\
/* 解决跨域问题 */
// import Proxy1 from './components/Proxy1.vue';
/* 可视化 */
// import Visualization from './components/Visualization.vue';
/* 路由器添加组件 */
// import Router from './components/Router.vue';
/* 导航守卫 */
import Router1 from './components/views/Router1.vue'
</script> 

<template>
  <!--  <A1/>-->
  <!--  <A2/>-->
  <!--  <A3/>-->
  <!--  <A4/>-->
  <!--  <A7/>-->
  <!--  <Layout/>-->
  <!--  <water-fall-vue/>-->
  <!--  <CardVue/>-->
  <!--  <Recursive/>-->
  <!--  <Trends/>-->
  <!--  <Dialog/>-->
  <!--  <Sync/>-->
  <!--  将<Teleport>内部内容放入body
  <Teleport to="body">
    <Teleport0/>
  </Teleport> -->
  <!-- <KeepAlive :include="['A','B']" :max="10">内部组件表单内容将被缓存<A/></KeepAlive> 
  KeepAlice无onUnmounted   卸载在onDeactived-->
  <!-- <Transition0/> -->
  <!-- <Transition1 /> -->
  <!-- <Transition2 /> -->
  <!-- <Provide1 /> -->
  <!-- <Bus1 /> -->
  <!-- <VModell/> -->
  <!-- <CustomDirective /> -->
  <!-- <CustomDirective1 /> -->
  <!-- <CustomDirective2 /> -->
  <!-- <Hooks /> -->
  <!-- <GlobalFunctions /> -->
  <!-- <CustomPlugin /> -->
  <!-- <EL1 /> -->
  <!-- <CssNewFeatures /> -->
  <!-- <Tailwind />  -->
  <!-- <NextTick /> -->
  <!-- <MobileWeb /> -->
  <!-- <UnoCss1 /> -->
  <!-- <FunctionComponents /> -->
  <!-- <Vue33 /> -->
  <!-- <EnvironmentVariable /> -->
  <!-- <CustomVue /> -->
  <!-- <Proxy1 /> -->
  <!-- <Visualization /> -->
  <!-- <Router /> -->
  <Router1 />
</template>

<style lang="scss">
#app {
  @include bfc;
  flex: auto;
  padding: 0;
}
</style>
